<template>
	<view style="background-color: #7800BE;">
		<view style="padding: 30px;">
			<view style="font-size: 18px;color: #fff;">提现到账银行卡</view>
			<view class="" style="color:#FFD86D;margin-top: 10px;">
				<view class="">{{bankAccName}}</view>
				<view class="">{{bankName}} {{bankCardNo}}</view>
			</view>
		</view>
		<view style="border-top-left-radius: 10px;border-top-right-radius: 10px;background-color: #fff;padding: 20px;">
			<view class="bl b30">
				<view class="bc">
					<i class="ri-money-cny-circle-fill" style="color: #7800BE;font-size:24px;"></i>
					<!-- <i-icon size="24px" color="#7800BE" name="money-cny-circle-fill"></i-icon> -->
					<text class="">提现金额</text>
				</view>
				<view class="bc">
					<view class="f14">可提现金额<text class="red">￥{{balance}}</text></view>
				</view>
			</view>
			<view class="bl dx">
				<view class="bc">
					<view class="r10" style="font-size: 30px;">￥</view>
					<input type="digit" style="font-size: 30px;width: 200px;" v-model="amount" />
				</view>
				<view class="f14" @click="amount=balance;">全部</view>
			</view>
			<button @click="openWin()">确认</button>
			<view style="height: 300px;margin-top: 30px;">
				<view class="bc b10">
					<view class="bc">
						<i class="ri-information-fill" style="color: #7800BE;font-size:22px;"></i>
						<!-- <i-icon size="22px" color="#7800BE" name="information-fill"></i-icon> -->
						提现说明
					</view>
				</view>
				<view class="f14" style="text-align: left;">
					<view>1、余额满3元才能提现，提现不收取任何手续费</view>
				</view>
				<view class="f14" style="text-align: left;">
					<view>2、提现到账时间2小时内</view>
				</view>
			</view>
		</view>
		<view v-if="show_win" class="p-shade" @click="show_win=false;">
			<view class="p-card" @click.stop="">
				<view class="" style="border-bottom:1px solid #CCCCCC;font-size:40rpx;padding:10rpx;">请输入交易密码</view>
				<input type="number" v-model="tradePwd" placeholder="请输入交易密码" maxlength="6"
					style="display: block;height: 100rpx;margin: 20rpx;text-align: center;font-size: 38rpx;" />
				<view class="" style="text-align: end;padding: 10rpx;">
					<button class="p-btn" @click.stop="withdraw()">确认</button>
					<button class="p-btn" @click.stop="show_win=false;">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accType: 0,
				zbAccount: '',
				zbAccName: '',
				balance: null,
				amount: null,
				bankAccName: '',
				bankName: '',
				bankCardNo: '',
				tradePwd: null,
				show_win: false
			}
		},
		methods: {
			towc() {
				uni.redirectTo({
					url: 'u-txwc'
				})
			},
			getAccount() {
				let _t = this
				this.httpRequest({
					url: '/per/acc/get/account',
					method: 'GET',
					fn(data) {
						console.log(data)
						_t.zbAccName = data.accName
						_t.zbAccount = data.account
						_t.balance = data.balance
						_t.bankName = data.bankName
						_t.bankCardNo = data.bankCardNo
						_t.bankAccName = data.bankAccName
					}
				})
			},
			openWin() {
				if ((/^\d{1,8}(\.?\d{1,2})?$/.test(this.amount))) {
					this.show_win = true
					this.tradePwd = '';
				} else {
					uni.showToast({
						title: '请输入交易金额',
						icon: 'error',
						duration: 2000
					})
				}
			},
			/**
			 * 提现：添加订单
			 */
			withdraw() {
				let msg = null;
				if (!this.zbAccount) {
					msg = "未获得提现账户"
				} else if (!this.bankCardNo) {
					msg = "未获得银行卡号"
				} else if (!(/^\d{1,8}(\.?\d{1,2})?$/.test(this.amount))) {

					msg = "请输入提现金额"
				} else if (!/^\d{6}$/.test(this.tradePwd)) {
					msg = "请输入交易密码"
				}
				if (msg != null) {
					uni.showToast({
						title: msg,
						icon: 'error',
						duration: 2000
					})
					return
				}
				let httpUrl = '/per/order/withdraw';
				if (this.accType == 0) {
					uni.showToast({
						title: '未获取账户类型',
						icon: 'error',
						duration: 3000
					})
					return
				}
				if (this.accType == 1) {
					httpUrl = '/per/order/withdraw';
				}
				if (this.accType == 2) {
					httpUrl = '/order/withdraw';
				}
				let _t = this
				this.httpRequest({
					url: httpUrl,
					method: 'POST',
					data: {
						amount: _t.amount,
						payerAccount: _t.zbAccount,
						payeeBankCardNo: _t.bankCardNo
					},
					fn(data) {
						console.log("订单号" + data)
						_t.withdrawConfirm(data, _t.zbAccount, _t.tradePwd)
					}
				})
			},
			/**
			 * 订单确认
			 * @param {Long} orderId 订单id
			 * @param {String} zbAccount 账户
			 * @param {String} tradePwd 交易密码
			 */
			withdrawConfirm(orderId, zbAccount, tradePwd) {
				let _t = this
				let reqPath = '/per/order/withdraw/confirm';
				if (this.accType == 0) {
					uni.showToast({
						title: '未获取账户类型',
						icon: 'error',
						duration: 3000
					})
					return
				}
				if (this.accType == 1) {
					reqPath = '/per/order/withdraw/confirm';
				}
				if (this.accType == 2) {
					reqPath = '/order/withdraw/confirm';
				}
				this.httpRequest({
					url: reqPath,
					method: 'POST',
					data: {
						orderId: orderId,
						account: zbAccount,
						tradePwd: tradePwd
					},
					fn(data) {
						console.log(data)
						_t.towc()
					}
				})
			}
		},
		onLoad(typeData) {
			console.log(typeData)
			if (typeData == null || typeData == undefined) {
				uni.showToast({
					title: '未获取账户',
					icon: 'error',
					duration: 3000
				})
				return;
			}
			this.accType = 0;
			if (typeData.accType == 'gr') {
				this.accType = 1;
				this.zbAccName = typeData.virtualAccName
				this.zbAccount = typeData.virtualAccNo
				this.balance = typeData.bal
				this.bankName = typeData.bankName
				this.bankCardNo = typeData.acctNo
				this.bankAccName = typeData.bankAccName
			} else if (typeData.accType == 'qy') {
				this.accType = 2;
				this.zbAccName = typeData.virtualAccName
				this.zbAccount = typeData.virtualAccNo
				this.balance = typeData.bal
				this.bankName = typeData.bankName
				this.bankCardNo = typeData.acctNo
				this.bankAccName = typeData.bankAccName
			}
			//this.getAccount()

		}
	}
</script>
<style>
	.dx {
		clear: both;
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid #999;
	}

	.p-shade {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.4);
		display: block;
	}

	.p-card {
		height: 300rpx;
		width: 600rpx;
		background-color: #FFFFFF;
		border: 1px solid #bebebe;
		border-radius: 4px;
		margin: 250rpx auto auto auto;
	}

	.p-btn {
		display: inline-block;
		height: 60rpx;
		line-height: 60rpx;
		/* width: 40rpx; */
		margin: 0;
		padding: 0;
		margin-right: 30rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.p-btn::after {
		content: '';
		height: 0;
		width: 0;
	}
</style>
